<template>
  <div class="blogEdit-container">
    <BaseHeader class="baseHeader"></BaseHeader>
    <div class="m-content">
      <el-form
        ref="editForm"
        status-icon
        :model="editForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="摘要" prop="summary">
          <el-input type="textarea" v-model="editForm.summary"></el-input>
        </el-form-item>
        <el-upload
          name="file"
          class="upload-demo"
          action="http://localhost/articles/upload/image"
          multiple
          :show-file-list="false"
          :limit="3"
          :on-success="successUpload"
        >
          <el-button size="small" type="primary">点击上传图片</el-button>
        </el-upload>
        <el-form-item label="分类" prop="category">
          <el-radio-group v-model="editForm.categoryId">
            <el-radio
              v-for="(category, index) in categories"
              :label="category.id"
              :key="index"
              >{{ category.categoryname }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容" prop="context">
          <mavon-editor v-model="editForm.context"></mavon-editor>
        </el-form-item>

        <el-form-item class="submitbtn">
          <el-button type="primary" @click="submitForm()">立即创建</el-button>
          <el-button>
            <router-link :to="{ name: 'Index' }">取消</router-link></el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import BaseHeader from '../components/BaseHeader.vue'
import 'mavon-editor/dist/css/index.css'
import 'highlight.js/styles/github.css'
import 'github-markdown-css'
export default {
  name: 'BlogEdit.vue',
  components: { BaseHeader },
  data() {
    return {
      editForm: {
        id: null,
        title: '',
        summary: '',
        context: '',
        categoryId: 1,
      },
      categories: [],
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          {
            min: 3,
            max: 50,
            message: '长度在 3 到 50 个字符',
            trigger: 'blur',
          },
        ],
        summary: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
      },
    }
  },
  methods: {
    submitForm() {
      const _this = this
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$axios
            .post('/articles/updateOrPublish', this.editForm, {
              headers: {
                Authorization: localStorage.getItem('token'),
              },
            })
            .then((res) => {
              _this.$alert('操作成功', '提示', {
                confirmButtonText: '确定',
                callback: (action) => {
                  _this.$router.push('/blog/' + res.data.data.id)
                },
              })
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    successUpload(response) {
      this.showTool(response.data)
    },
    showTool(tool) {
      this.$message({
        duration: 0,
        showClose: true,
        dangerouslyUseHTMLString: true,
        message: '<strong>' + tool + '</strong>',
      })
    },
    getCategories() {
      var _this = this
      this.$axios
        .get('/category')
        .then((result) => {
          _this.categories = result.data.data
        })
        .catch((err) => {})
    },
  },
  created() {
    this.getCategories()
  },
}
</script>

<style scoped>
.submitbtn {
  margin-left: 37%;
  padding-bottom: 5px;
}
.blogEdit-container {
  background-color: #fff;
  margin: 0 auto;
}
a {
  text-decoration: none;
}
.m-content {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding-top: 20px;
  padding-right: 20px;
  margin: 100px auto;
  max-width: 1200px;
}
.baseHeader {
  position: fixed;
  top: 0;
  z-index: 1024;
}
.upload-demo {
  margin-left: 85px;
  margin-bottom: 10px;
}
</style>
